<template>
    <div :class="cname" class="comp-input-column">
        <div class="comp-input-column-chlid">
            <div class="comp-input-c">
                <div @click="changeTypePicker" ref="select" class="comp-select">{{value}}</div>
            </div>                    
        </div>
        <picker v-if="selectData.key == 'area' " v-model="visible" :data-items="areaItems" @change="valuesChange">
            <div class="top-content" slot="top-content">
                {{selectData.defaultSelect}}
                <div @click="changeTypePicker" class="btn">确定</div>
            </div>
        </picker> 
        <picker v-else v-model="visible" :data-items="selectData.items" @change="valuesChange">
            <div class="top-content" slot="top-content">
                {{selectData.defaultSelect}}
                <div @click="changeTypePicker" class="btn">确定</div>
            </div>
        </picker> 
    </div>    
</template>

<script>
import picker from 'vue-3d-picker'
import axios from 'axios'
import { addClass } from '@/assets/js/dom.js'
export default {
    name: 'selectInputComponents',
    props: {
        selectData: {
            items: Array,
            defaultSelect: String,
            key: String
        },
        cname: String
    },
    data ( ) {
        return {
            visible: false,
            value: this.selectData.defaultSelect ? this.selectData.defaultSelect : '请选择',
            cityData: [],
            lastProvince: 0,
            lastCity: 0,
            provinces: [],
            provinceCitys: [],
            cityAreas: [],
            areaItems: [],
            timer: null           
        }
    },
    components: {
        picker
    },
    created ( ) {
        if ( this.selectData.key == 'area' ) {
            // 省市区 三级联动选择场景时
            this.getAreacityAxios()
        }
    }, 
    watch: {
        value ( ) {
            let self = this
            this.timer = setTimeout( () => {
                if ( self.value.indexOf("省")　!= -1 || self.value.indexOf("市")　!= -1 || self.value.indexOf("特区")　!= -1 || self.value.indexOf("自治区")　!= -1 || self.value.indexOf("自治州")　!= -1 || self.value.indexOf("地区")　!= -1 ) {
                    let p = self.value.split(',')[0]   
                    if( p != self.lastProvince ) {
                        new Promise( self.updateProvince ( p ) ).then(function(res){
                            let c = self.value.split(',')[1]
                            self.updateCity ( c )
                        }).catch(function(reason){
                            console.log(reason)
                        })
                        return                       
                    }
                    let c = self.value.split(',')[1]
                    self.updateCity ( c )
                }
            },100)                        
        }
    },
    methods: {
        changeTypePicker ( ) {
            this.visible = !this.visible
        },
        valuesChange ( ) {
            let self = this
            if( arguments.length < 3 ) {
                this.value = arguments[0]
            }else if( arguments.length == 3 ){
                this.value = arguments[0] + arguments[1]
                if( arguments[0].indexOf('层') != -1 || arguments[0].indexOf('楼') != -1 ) {
                    this.value = parseInt(arguments[0]) > parseInt(arguments[1]) ? parseInt(arguments[0]) + '/' + parseInt(arguments[0]) : parseInt(arguments[0]) + '/' + parseInt(arguments[1])
                }
            } else {
                this.value = arguments[0] + arguments[1] + arguments[2]
                if( arguments[0].indexOf('省') != -1 || arguments[1].indexOf('市') != -1 || arguments[0].indexOf('自治区') != -1 || arguments[0].indexOf('特区') != -1 || arguments[0].indexOf('自治州') != -1 ) {          
                    this.value = arguments[0] == arguments[1] ? arguments[0] + ',' + arguments[2] : arguments[0] + ',' + arguments[1] + ',' + arguments[2]
                }                
            }
            this.$emit('updateSelectValue',[this.selectData.key,this.value])
            addClass(this.$refs['select'], 'comp-select-cur')
        },
        getAreacityAxios ( ) {
            let self = this
            axios.get('../../../../static/json/province.json').then(( res ) => { 
                if( res.status == 200 && res.data ) {
                    self.cityData = res.data
                    self.updateArea( 0, 0 )
                }
            }) 
        }, 
        updateArea ( provinceIndex, cityIndex ) {
            let self = this
            for ( let i = 0; i< self.cityData.length; i++ ) {
                self.provinces.push(self.cityData[i].name)               
            }
            self.lastProvince = self.provinces[provinceIndex]
            self.provinceCitys = self.getCitysArray(self.cityData, self.lastProvince)
            self.lastCity = self.provinceCitys[cityIndex]
            self.cityAreas = self.getAreasArray(self.cityData, self.lastProvince, self.lastCity)[0]
            self.areaItems = [{
                name: 'provinces',
                width: '30%',
                values: self.provinces
            },{
                name: 'city',
                width: '30%',
                values: self.provinceCitys
            },{
                name: 'area',
                width: '40%',
                values: self.cityAreas
            }]
        },
        getCitysArray ( arr, lastProvince ) {
            //跟进省会名获取城市数组
            let citys = []
            for( let k = 0; k <  arr.length; k++ ) {
                if( lastProvince == arr[k].name ){
                    for( let j = 0; j < arr[k].city.length; j++ ) {
                        citys.push(arr[k].city[j].name)
                    }
                }
            }
            return citys
        },
        getAreasArray ( arr, lastProvince, lastCity ) {
            //根据省会，城市获取 区县
            let cityAreas = []
            for ( let r = 0 ; r < arr.length; r++ ) {
                if( lastProvince == arr[r].name ){
                    for( let jj = 0; jj < arr[r].city.length; jj++ ) {
                        if( lastCity == arr[r].city[jj].name ) {
                            cityAreas.push(arr[r].city[jj].area)
                        }
                    }
                }
            }
            return cityAreas
        },
        updateProvince ( p ) {
            this.lastProvince = p
            this.areaItems[1].values = this.getCitysArray(this.cityData, this.lastProvince)
            return function(){}
        },
        updateCity ( c ) {
            if( c != this.lastCity ) {
                this.lastCity = c
                this.areaItems[2].values = this.getAreasArray(this.cityData, this.lastProvince, this.lastCity)[0]
            } 
            return function(){}                       
        }       
    },
    destroyed ( ) {
        if( this.timer ) {
            clearTimeout(this.timer)
        }
    }  
}
</script>

<style lang="stylus" scoped>
.picker-backdrop
    position fixed
    left 0
    bottom 0
    top auto
    overflow hidden
.comp-input-column
    display flex
    width 100%
    height auto 
    overflow hidden 
    .comp-input-column-chlid
        flex 1
        .comp-borer-bottom
            border-bottom 1px solid #c8c8c8
            height 40px        
        .comp-input-c
            width 100%
            font-size 14px
            color #c8c8c8
            .comp-select
                width 100%
                height 45px
                line-height 45px
                font-size 16px  
                color #c8c8c8
            .comp-select-cur
                color #333
.top-content
    background-color #f9fafc
    border-top 1px solid #eaeaea
    border-bottom 1px solid #eaeaea
    height 45px
    line-height 45px
    font-size 14px
    color #999
    text-align center 
    position relative
    .btn 
        width 75px
        height 100%
        position absolute 
        right 0
        top 0
        color #ff552e
</style>